<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index1.css">
</head>
<body>
<div class="app" v-cloak>
    <div class="width980 margin harder-box">
        <div class="hander-logo"></div>
        <a href="#" class="hander-zixun">资讯</a>
        <div class="hander-city">
            <span>{{asg}}</span>
            <div class="hander-xia"></div>
            <div class="box ">
                <ul class="hander-country">
                    <li v-for="(item,index) in arr" @click="fu(index)"><a href="#">{{item}}</a></li>
                </ul>
            </div>
        </div>
        <ul class="hander-code">
            <li>
                <a href="#">
                    <i class="hander-drop"></i>
                    <span>手机官网 </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="hander-drop1"></i>
                    <span>爱智康服务号 </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="hander-drop2"></i>
                    <span>官方APP</span>
                </a>
            </li>
        </ul>
        <h5>
            <i class="hander-dianhua"></i>
            课程咨询: 4000-121-121
        </h5>
    </div>
    <div class="daohang-box ">
        <ul class="daohang-ul">
            <li v-bind:class="{active:index===0}" v-for="(item,index) in crr">{{item}}</li>
        </ul>
    </div>
    <div class="neirong-box">
        <div class="top-box">
            <div class="top-left">
                <div class="banner-box">
                    <ul>
                        <li v-show="i===index" v-for="(item,index) in banner"><img v-bind:src="'img/index1/'+item"/>
                        </li>
                    </ul>
                    <ul class="top-yuan-box">
                        <li @mouseover="hover(index)" @mouseout="star" v-bind:class="{active1:i===index}"
                            v-for="(item,index) in banner"></li>
                    </ul>
                </div>
                <div class="mianfei-box">
                    <h3 class="mianfei-top">
                        免费学习资料
                    </h3>
                    <dl class="zuixing-box">
                        <dt>最新试题</dt>
                        <dd v-for="(item,index) in latest"><a>{{item}}</a></dd>
                    </dl>
                    <dl class="zuixing-box">
                        <dt>优秀作文</dt>
                        <dd v-for="(item,index) in line"><a>{{item}}</a></dd>
                    </dl>
                    <dl class="zuixing-box">
                        <dt>中考试题库</dt>
                        <dd v-for="(item,index) in zhong"><a>{{item}}</a></dd>
                    </dl>
                    <dl class="zuixing-box">
                        <dt>高考试题库</dt>
                        <dd v-for="(item,index) in zhong"><a>{{item}}</a></dd>
                    </dl>
                    <dl class="zuixing-box">
                        <dt>学科知识点</dt>
                        <dd v-for="(item,index) in subject"><a>{{item}}</a></dd>
                    </dl>
                </div>
            </div>
            <div class="top-left">
                <div class="top-center">
                    <h3 class="mianfei-top">
                        热点推荐
                    </h3>
                    <ul class="center-nei">
                        <li v-for="(item,index) in ai"><a v-bind:class="{big:index===0}">{{item}}</a></li>
                    </ul>
                    <ul class="center-nei">
                        <li v-for="(item,index) in anpai"><a v-bind:class="{big:index===0}">{{item}}</a></li>
                    </ul>
                    <ul class="center-nei">
                        <li v-for="(item,index) in noknow"><a v-bind:class="{big:index===0}">{{item}}</a></li>
                    </ul>
                </div>
            </div>
            <div class="top-left">
                <div style="width: 260px;">
                    <div class="title">使用工具</div>
                    <ul class="right-top flex">
                        <li class="flex">
                            <div class="righttp image1"></div>
                            <span><a class="font14">南京中考查分方式</a></span>
                        </li>
                        <li class="flex">
                            <div class="righttp image2"></div>
                            <span><a class="font14">江苏高考查分方式</a></span>
                        </li>
                        <li class="flex">
                            <div class="righttp image3"></div>
                            <span><a class="font14">学业水平测试报名方式</a></span>
                        </li>
                        <li class="flex">
                            <div class="righttp image4"></div>
                            <span><a class="font14">学习规划</a></span>
                        </li>
                        <li class="flex">
                            <div class="righttp image5"></div>
                            <span><a class="font14">选择课程</a></span>
                        </li>
                        <li class="flex">
                            <div class="righttp image6"></div>
                            <span><a class="font14">了解爱智康</a></span>
                        </li>
                    </ul>
                    <div class="title">老师解读.爱智康原创</div>
                    <ul>
                        <li class=" rightlist">
                            <div class="right-hot"></div>
                            <a href="#" class="font14" style="color:#e24943">&nbsp;初三英语期中知识点拨直播课</ a>
                        </li>
                        <li class="rightlist">
                            <div class="right-hot"></div>
                            <a href="#" class="font14" style="color:#e24943">&nbsp;初三数学期中复习指导直播课</ a>
                        </li>
                        <li class="rightlist" v-for="(item,index) in square">
                            <div class="square"></div>
                            <a href="#" class="font14">&nbsp;&nbsp;{{item}}</a>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
        <div class="big-lunbo-box">
            <ul>
                <li v-show="index===a" v-for="(item,index) in banner1"><a><img v-bind:src="'img/index1/'+item"></a></li>
            </ul>
            <ul class="banner1-box">
                <li @mouseover="hover1(index)" @mouseout="star1" v-bind:class="{active2:a===index}"
                    v-for="(item,index) in banner1"></li>
            </ul>
        </div>
        <div class="bottom-box">
            <div class="bottom-left">
                <div class="bottom-top">
                    <h3 class="bottom-little">
                        报考资讯
                    </h3>
                    <ul class="headline-tab">
                        <li @mouseover="dian(index)" v-for="(item,index) in headline"><a
                                v-bind:class="{it:index===tab}">{{item}}</a></li>
                    </ul>
                </div>

                <ul v-show="tab===0" class="headline-list">
                    <li v-for="(item,index) in information">
                        <a>{{item.name}}</a>
                        <p>{{item.list}}</p>
                        <p class="time">2018-12-03</p>
                    </li>
                </ul>
                <ul v-show="tab===1" class="headline-list">
                    <li v-for="(item,index) in information1">
                        <a>{{item.name}}</a>
                        <p>{{item.list}}</p>
                        <p class="time">2018-12-03</p>
                    </li>
                </ul>
                <ul v-show="tab===2" class="headline-list">
                    <li v-for="(item,index) in information">
                        <a>{{item.name}}</a>
                        <p>{{item.list}}</p>
                        <p class="time">2018-12-03</p>
                    </li>
                </ul>
                <ul v-show="tab===3" class="headline-list">
                    <li v-for="(item,index) in information1">
                        <a>{{item.name}}</a>
                        <p>{{item.list}}</p>
                        <p class="time">2018-12-03</p>
                    </li>
                </ul>
                <ul v-show="tab===4" class="headline-list">
                    <li v-for="(item,index) in information">
                        <a>{{item.name}}</a>
                        <p>{{item.list}}</p>
                        <p class="time">2018-12-03</p>
                    </li>
                </ul>
                <a class="load-duo">点击查看更多内容 > </a>
            </div>
            <div class="bottom-right">
                <h3 class="bottom-right-sinba">
                    专题.活动
                </h3>
                <ul class="bottom-list">
                    <li v-for="(item,index) in piclist"><a><img v-bind:src="'img/index1/'+item"></a></li>
                </ul>
                <h3 class="title">
                    免费公开课
                </h3>
                <ul class="bottom-list1">
                    <li v-for="(item,index) in free">
                        <a>{{item}}</a>
                    </li>
                </ul>
                <h3 class="title">
                    学科知识点汇总
                </h3>
                <ul class="primary">
                    <li v-for="(item,index) in primary"><a>{{item}}</a></li>
                </ul>
                <ul class="junior">
                    <li v-for="(item,index) in junior"><a>{{item}}</a></li>
                </ul>
                <ul class="secondary">
                    <li v-for="(item,index) in secondary"><a>{{item}}</a></li>
                </ul>
            </div>

        </div>
    </div>
    <div class="width980 margin">
        <div class="container">
            <div class="title">友情链接
                <a href=" " class="font14">欢迎申请合作></a>
            </div>
            <ul class="youlist flex">
                <li v-for="(item,i) in youlist">
                    <a href="#" class="font14">{{item}}</a>
                </li>
            </ul>
            <div class="title">教育导航</div>
            <ul class="jiaolist">
                <li v-for="(item,i) in jiaolist">
                    <a href="#" class="font14">{{item}}</a>&nbsp;
                </li>
            </ul>
        </div>
    </div>
    <div class="footer-box">
        <div class="footer-links">
            <ul class="footer-top">
                <li v-for="(item,index) in city"><a>{{item}}</a></li>
            </ul>
        </div>
        <div class="footer-logo">
            <a class="footer-logo-pic"></a>
            <a class="footer-zixun">资讯</a>
            <h3 class="footer-text">中小学资讯学习宝库</h3>
        </div>
        <ul class="footer-nav">
            <li v-for="(item,index) in footer">
                <a>{{item}}</a>
                |
            </li>
        </ul>
        <p class="footer-cpy">Copyright 2005-2018 www.jiajiaoban.com. All Rights Reserved.</p>
        <p class="footer-icp">京ICP备09042963号-16 京公网安备:110108007120号-4</p>
        <p class="footer-tcp">联系电话：400-012-1121 北京学而思网络科技有限公司</p>
    </div>

</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            tab: 0,
            i: 0,
            a: 0,
            asg: '北京',
            arr: ['北京', '上海', '广州', '深圳', '天津', '南京', '沈阳', '济南', '成都', '贵州', '杭州', '西安', '武汉', '苏州'],
            crr: ['首页', '小学', '初中', '高中', '中考', '高考', '学习中心', '选课中心', '免费公开课'],
            banner: ["banner1.png", "banner2.png", "banner3.png", "banner4.png", "banner5.jpg", "banner6.png"],
            latest: ['期中试题', '期末试题', '月考试题', '中考练习题', '高考练习题', '练习题'],
            line: ['小学作文', '初中作文', '高中作文', '中考作文', '高考作文', '满分作文'],
            zhong: ['2019年', '2019年', '2019年', '2019年', '2019年'],
            subject: ['小学数学汇总', '初中数学汇总', '高中数学汇总', '初中英文汇总', '查找更多'],
            ai: ['爱智康：一个好老师的13个小时', '2018-2019海淀高三期中物理试卷整体评析', '2018-2019北京海淀区高三期中考试物理试题答案解析', '2018-2019北京海淀区高三期中考试作文解析', '2018-2019北京海淀区高三期中考试作文范文：合作'],
            anpai: ['2019年北京高中寒假放假时间安排', '2018-2019北京海淀区高三期中考试作文题目：自拟题目', '2018-2019北京海淀区高三期中考试语文试题答案解析', '2018-2019海淀高三期中语文试卷整体评析', '2018-2019北京海淀区高三期中考试试题答案解析汇总'],
            noknow: ['不知中考英语听说该如何练习？7次课搞定', '2018-2019北京各区高三期中考试试题答案解析汇总', '2018-2019北京海淀区高二期中考试试题答案解析汇总', '2018-2019北京各区高二期中考试试题答案解析汇总', '2018-2019北京海淀区高一期中考试试题答案解析汇总'],
            banner1: ['1.png', '2.png'],
            square: ["五年级数学期中复习直播课", "六年级数学期中复习直播课", "初一数学期中复习指导直播课", "初二数学期中复习指导直播课", "初一语文期中考后诊断之文言文直播课", "初三语文期中考后诊断之作文直播课", "初一英语期中知识点拨直播课", "初二英语期中知识点拨直播课"],
            headline: ['政策资讯', '学习指导', '志愿成绩', '小初高题目', '中高考报名'],
            information: [{
                name: '2019年中考:2018与2021年中考改革的区别',
                list: '2019年中考:2018与2021年中考改革的区别！2018年快结束了，马上就要迎来新年和寒假了，初三的同学们要好好注意了，在寒假里可不能光顾着玩，下个学期就要迎来中考了，那么在考试之前，同学们可要'
            }, {
                name: '2019年中考:非京籍子女在京考试审核条件',
                list: '  2019年中考:非京籍子女在京考试审核条件。新的学期结束了，同学们应该都在为即将到来的期末考试烦恼吧，初中的生活结束了，马上就要进入到新的学期去了，这是同学们人生中的一个升华，看看自己的分数，给自己 '
            }, {
                name: '2019年北京东城区中考报名情况须知',
                list: '  2019年北京东城区中考报名情况须知！也许平时的月考你可以告诉自己考不好没关系，但是到了中考，你看到一道题发现这道题很简单，你好像在书上看到过，但是又好像不确定的时候，你是否会产生一丝恐慌？这是你的 '
            }, {
                name: '2019年北京西城区中考报名情况须知',
                list: '  2019年北京西城区中考报名情况须知！还有一个月，就要迎来2019年的元旦节了，元旦节的到来同时也告诉我们，2018年已经彻底过去了，同时，初三的同学们，你要绷紧神经了，因为在2019年，中考即将来 '
            }, {
                name: '2019年北京朝阳区中考报名情况须知',
                list: '  2019年北京朝阳区中考报名情况须知！2018年快结束了，寒假也快来临了，同学们对今年的成绩还满意吗？马上就要过年了，新的一年要对即将过去的生活做一个总结，这样才能在新的一年里有新的收获哦。2019 '
            }, {
                name: '2019年北京丰台区中考报名情况须知',
                list: '  2019年北京丰台区中考报名情况须知！中考的时间已经离我们越来越近了，2018年也即将过去了，初三的同学们有没有一些紧张感，面对这样一次大型的考试，同学们可要好好准备哦，下面爱智康朽就为大家带来20 '
            }, {
                name: '2019年北京海淀区中考报名情况须知',
                list: '  2019年北京海淀区中考报名情况须知！时间飞逝，光阴荏苒，一眨眼三年过去了，仿佛上一秒欢欢乐乐刚进初中校园的模样仿佛还在眼前，这么快就要到中考的时候了，中考可是同学们人生第一次要面对的转折点。201 '
            }, {
                name: '2019年北京通州区中考报名情况须知',
                list: '  2019年北京通州区中考报名情况须知！时间飞逝，光阴荏苒，一眨眼三年过去了，仿佛上一秒欢欢乐乐刚进初中校园的模样仿佛还在眼前，这么快就要到中考的时候了，中考可是同学们人生第一次要面对的转折点。201 '
            }, {
                name: '2019年北京昌平区中考报名情况须知',
                list: '  2019年北京昌平区中考报名情况须知！也许平时的月考你可以告诉自己考不好没关系，但是到了中考，你看到一道题发现这道题很简单，你好像在书上看到过，但是又好像不确定的时候，你是否会产生一丝恐慌？这是你的 '
            }, {
                name: '2019中小学寒假放假时间安排',
                list: '  2019中小学寒假放假时间安排！寒假来到了，同学们大家要有一个寒假生活计划，按照计划进行学习，利用这个假期，好好进行查漏补缺吧，祝大家学习进步。下面就是朽为大家带来的2019中小学寒假放假时间安排， '
            }],
            information1: [{
                name: '2019年初二物理下册相关试题',
                list: '  2019年初二物理下册相关试题！对于基慈较差的同学，需要从最简单的物理知识定理，现象等基础知识抓起，如果连最基本的东西都没有掌握，公式当然也不能理解，即使背会了公式，却不知道如何运用，那就非常可惜了 '
            }, {
                name: '2019年初二物理上册相关试题',
                list: '  2019年初二物理上册相关试题！初中物理看似挺大的两本课本，其实只讲的知识点并不是很多，不过每一个知识点都是在一个大类目里进行包括。书中过多的内容是通过课本让我们更好的理解这些知识点，对于如何在考试 '
            }, {
                name: '2019年初一下册英语相关试题',
                list: '  2019年初一下册英语相关试题！其实，英语是外语，跟中文有很大不同，孩子学习起来也特别费劲，所以要想学好也不是一件容易的事。其是到了初中阶段，我们不难发现 孩子们简单的英语交流还是没问题的，可是一到 '
            }, {
                name: '2019年初一上册英语相关试题',
                list: '  2019年初一上册英语相关试题！学习英语不用花大块的时间，10分钟的散步可以练 说 ,吃完饭后可以读一会儿英语小说，睡前听几分钟英语，可以使你得到更好地休息只要你每天抽出一些时间来练英语，你的英语成 '
            }, {
                name: '2019年初一下册数学相关试题',
                list: '  2019年初一下册数学相关试题！初中阶段开始涉及一些简单的数学思想，比如方程思想、数形结合思想、分类讨论思想等，这些在初中解题过程中常见的思想，也是提高解题能力的基本思想。下面，朽为同学们带来今天的 '
            }, {
                name: '2019年初一上册数学相关试题',
                list: '  2019年初一上册数学相关试题！在学习数学前首先应该从最基础的东西开始学习，因为数学的每一个理论或者每一个环节都是以前一个基础理论为前提的，是环环相扣的理论链的关系。带着这种观点去学习也就不必去死记 '
            }, {
                name: '2019年初一下册语文相关试题',
                list: '  2019年初一下册语文相关试题！初中学生在语文考试中最担心的主要就是两部分，一个是写作，一个是阅读，这两种题型占据了语文试卷的半壁江山，基本上可以说得阅读与作文得天下了。下面，朽为同学们带来今天的内 '
            }, {
                name: '2019年初一上册语文相关试题',
                list: '  2019年初一上册语文相关试题！语文成绩优秀的孩子，语文学习起来特别的轻松，每次考试成绩也都很稳定，甚至轻松就能考142、143，发挥好一点，145+都行。就是因为基础好，基础题可以做到几乎不丢分， '
            }, {
                name: '2018年九年级上册地理复习资料',
                list: '  2018年九年级上册地理复习资料！要知道初中地理的学习是为我们高中的学习打基础，如果在初中阶段都不将基础知识掌握好，那么，到了高中阶段，想要提高，是非常困难的。下面朽为大家带来2018年九年级上册地 '
            }, {
                name: '2018年八年级上册地理复习资料',
                list: '  2018年八年级上册地理复习资料！地理，是一门需要结合理论及实践的学科。它有大量零碎和容易混淆的知识点，运用起来相当复杂，所以很多孩子在学习地理科目时都觉得困难。其实，相对而言，初中地理的学习还是比 '
            }],
            piclist: ['c1.jpg', 'c2.png', 'c3.png', 'c4.png'],
            free: ['五分钟小讲堂：什么是学会学习', '一元二次方程中的整数根问题', '刘备——屌丝的逆袭故事', '全等三角形'],
            primary: ['小学数学', '小学语文', '小学英语'],
            junior: ['初中数学', '初中语文', '初中英文', '初中物理化', '初中史地政'],
            secondary: ['高中数学', '高中语文', '高中英语', '高中物理化', '高中史地政'],
            youlist: ["新浪教育", "家教", "中小学教育", "52司法考试", "太平洋早教", "小学教育", "天津成考网", "经济师考试", "人力资源培训", "公务员", "平和英语村", "考研", "教头网", "中国大学排名", "开心夏令营", "自考", "MBA培训"],
            jiaolist: ["爱智康官网", "中考网", "幼教网", "家长帮", "高考网", "考研网", "小学资讯网"],
            city: ['北京小学升初中', '北京中考', '北京高考', '北京初中', '北京高中', '南京小学', '南京初中', '南京高中', '深圳小学', '深圳中考', '深圳高考', '武汉小学', '武汉中考', '武汉高考', '天津小学', '天津初中', '天津高中', '北京中考', '广州小学升初中', '广州中学', '广州高考', '西安小学', '西安中考', '陕西高考', '西安高中', '上海小学', '上海初中', '上海高中', '杭州小学', '杭州中考', '浙江高考', '成都中考', '成都高考', '成都学校', '成都真题'],
            footer: ['关于我们', '联系我们', '社会招聘', '校园招聘', '爱智康资讯手机站'],
            timer: 0,
            timer1: 0

        },
        methods: {
            fu(i) {
                this.asg = this.arr[i]
            },
            change() {
                if (this.i === this.banner.length - 1) {
                    this.i = -1
                }
                this.i++
            },
            star() {
                this.timer = setInterval(this.change, 1000)
            },
            hover(index) {
                clearInterval(this.timer)
                this.i = index
            },
            change1() {
                if (this.a === this.banner1.length - 1) {
                    this.a = -1
                }
                this.a++
            },
            star1() {
                this.timer1 = setInterval(this.change1, 1000)
            },
            hover1(index) {
                clearInterval(this.timer1)
                this.a = index
            },
            dian(index) {
                this.tab = index
            }
        },
        mounted() {
            this.star()
            this.star1()
        }
    })

</script>
</body>
</html>